<script setup lang="ts">
import flower from '@/assets/flower.png'
import { resetRouter } from '@/router'
import { SESSION } from '@/utils/storage'

const router = useRouter()

let timer: ReturnType<typeof setTimeout>

// 定时退出方法
const exitAfterDelay = () => {
  const delay = 20 * 1000
  ElMessage({
    message: `测试结束，${delay / 1000}秒后将返回登录页`,
    type: 'success',
    duration: delay,
  })
  timer = setTimeout(() => {
    SESSION.clear()
    clearTimeout(timer)
    resetRouter()
    router.push('/login')
  }, delay)
}

const exitNow = () => {
  clearTimeout(timer)
  SESSION.clear()
  resetRouter()
  router.push('/login')
}

onMounted(() => {
  exitAfterDelay()
})
</script>

<template>
  <div class="h-full flex flex-col items-center justify-center gap-6">
    <img :src="flower" />
    <div class="text-3xl text-brand font-bold">测试结束</div>
    <div class="text-3xl text-brand font-bold">感谢您的配合</div>
    <el-button type="primary" class="mt-4" @click="exitNow">立即结束</el-button>
  </div>
</template>
